<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading" v-cloak>
        <el-tabs :stretch="true" v-model="activeTab">
            <el-tab-pane label="基础" name="base">
                <el-form-item label="数据来源">
                    <el-radio v-model="module.data.dataFrom" label="auto">自动挑选</el-radio>
                    <el-radio v-model="module.data.dataFrom" label="ids">手动挑选</el-radio>
                </el-form-item>
                <el-form-item label="自动翻页">
                    <el-radio-group @input="AutoPageChange" :value="module.data.autoPageTurn">
                        <el-radio :label="true">开启</el-radio>
                        <el-radio :label="false">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="每页数量">
                    <el-input-number controls-position="right" style="width: 90px;" :min="2" :max="20" v-model="module.data.pageSize" />
                </el-form-item>

                <transfer :titles="['待选文章', '已选文章']" :data="items" v-model="module.items" v-if="module.data.dataFrom == 'ids'"
                    :props="{ key: 'id', label: 'title' }"></transfer>

            </el-tab-pane>
            <el-tab-pane label="标题" name="header">
                <header-editor :module="module.header" v-if="module.header"></header-editor>
            </el-tab-pane>
            <el-tab-pane label="样式" name="style">

                <module-style-editor :module="module" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from "vuex";
import Transfer from "@/components/Transfer";
import ModuleStyleEditor from "../ModuleStyleEditor/Index";
import { getBrokerProfileList } from "@/api/user";
import LinkEditor from "@/components/LinkEditor";
import HeaderEditor from "../base/HeaderEditor";
import { getNewsList } from "@/api/news";
export default {
    data () {
        return {
            predefineColors: [
                "#ffffff",
                "#f9f9f9",
                "#f4f4f4",
                "#cecece",
                "#999999",
                "#1989fa",
                "#000000",
            ],
            activeTab: "base",
            items: [],
            loading: false,
            // 样式选项
        };
    },
    watch: {},
    components: {
        Transfer,
        ModuleStyleEditor,
        HeaderEditor,
        LinkEditor,
    },
    props: {
        module: { type: Object, default: null },
    },

    mounted: function () {
        this.loadData();
    },

    computed: {
        ...mapGetters(["myconfig"]),
        newIds: {
            get () {
                if (this.module.data.ids) {
                    return this.module.data.ids
                } else {
                    return this.module.ids
                }
            },
            set (ids) {
                Vue.set(this.module.data, 'ids', ids)
            }
        },
        pageModules: {
            get() {
                return this.$store.state.pagemaker.pageModules;
            },
            set(val) {
                this.updateModules(val);
            },
        },
    },

    methods: {

        loadData: function () {
            this.loading = true;
            var params = { simple_list: true };
            getNewsList(params).then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return false;
                }
                this.items = res.data.result;
            });
        },
        updateModules: function (modules) {
            this.$store.commit("pagemaker/setModules", modules);
        },
        AutoPageChange(e){
            // 如果关闭自动翻页不需要验证
            console.log(e);
            if(!e){
                console.log(e,111);
                this.module.isBottom = false
                this.module.data.autoPageTurn = false
                var newdata = this.module
                var nindex = this.$store.state.pagemaker.currentModuleIndex;
                this.$store.commit('pagemaker/updateCurrentModule', { data: newdata, index: nindex });
                return
            }
            // 如果打开自动翻页，需要检查该页面有没有自动翻页模块
            let hasBottomModule = this.pageModules.some(module => {
                if (module.isBottom === true) {
                    return true;
                }
                return false;
            });
            if(hasBottomModule){
                this.$message.error('同一页面只能有一个自动翻页模块模块')
                this.module.isBottom = false
                this.module.data.autoPageTurn = false
                return
            }
            // 该页面没有自动翻页模块，将该模块打开自动翻页
            this.module.isBottom = true
            this.module.data.autoPageTurn = true

            var newdata = this.module
            var nindex = this.$store.state.pagemaker.currentModuleIndex;
            console.log(newdata,nindex);
            this.$store.commit('pagemaker/updateCurrentModule', { data: newdata, index: nindex });
            
        }
    },
};
</script>

<style scoped>
.form-attrs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.form-attrs .attr-label {
    margin-left: 10px;
}

.form-attrs .attr-label:first-child {
    margin-left: 0;
}

.style-items {
    margin: 10px 0 10px 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    user-select: none;
}

.style-items .style-item {
    width: 100px;
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.35);
    border-radius: 3px;
    border: 1px solid #f1f1f1;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.style-items .style-item:nth-child(3n) {
    margin-right: 0;
}

.style-items .style-item:hover {
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.6);
}

.style-items .style-item.active {
    border: 1px solid #1989fa;
    box-shadow: none;
}
</style>